<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>manage</title>
  <link rel="shortcut icon" href="images/icon-48x48-nevegy.png" />
  <link rel="stylesheet" href="vendor/bootstrap.min.css">
  <link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="vendor/animate.min.css">
  <link rel="stylesheet" href="css/managedevice.css?2025006251745">
</head>

<body>
<div class="body">
  <h1 class="header">
    <img src="images/tower-broadcast.svg" alt="" srcset="">
    <span st="Manage AC">Manage AC</span>
  </h1>
  <div class="form" id="type1">

    <h3 st="General information:">General information:</h3>
    <label for="areaLocation" st="Location area belongs to:">Location area belongs to:</label>
    <select name="areaLocation" id="areaLocation" class="form-control" disabled>
      <option value=""></option>
    </select>

    <label for="dev_name" st="Device name:" class="none">Device name:</label>
    <input type="text" name="areaName" id="dev_name" class="form-control none">

    <label for="areaName" st="Area name:">Area name:</label>
    <input type="text" name="areaName" id="areaName" class="form-control">

    <label for="manualMode" st="Mode:">Mode:</label>
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check" name="manualMode" id="manualMode1" autocomplete="off" value="1">
      <label class="btn btn-outline-primary" for="manualMode1" st="Manual Mode">Manual Mode</label>

      <input type="radio" class="btn-check" name="manualMode" id="manualMode2" autocomplete="off" value="0">
      <label class="btn btn-outline-primary" for="manualMode2" st="Controlled by Area">Controlled by Area</label>
    </div>
    <div class="block-item">
      <div>
        <label for="" st="Target Temperature (°C)">Target Temperature (°C)</label>
        <div id="temperature_manual" class="tempSize"></div>
        <div>
          <button type="button" class="btn btn-primary" id="plusTempManual"><i class="fa-solid fa-plus"></i></button>
          <button type="button" class="btn btn-primary" id="minusTempManual"><i class="fa-solid fa-minus"></i></button>
        </div>
      </div>
      <div>
        <label for="allowIndep" st="Allow Independent:">Allow Independent:</label>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
          <input type="radio" class="btn-check" name="allowIndep" id="allowIndep1" autocomplete="off" value="0">
          <label class="btn btn-outline-primary" for="allowIndep1" st="No">No</label>

          <input type="radio" class="btn-check" name="allowIndep" id="allowIndep2" autocomplete="off" value="1">
          <label class="btn btn-outline-primary" for="allowIndep2" st="Yes">Yes</label>
        </div>

        <label for="backauto" st="BackAuto:">BackAuto: </label>
        <input type="time" class="form-control" name="backauto" id="backauto" value="00:00">

        <label for="fanMode_manual" st="Fan Mode:">Fan Mode:</label>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
          <input type="radio" class="btn-check" name="fanMode_manual" id="fanMode_manual1" autocomplete="off" value="-1">
          <label class="btn btn-outline-primary" for="fanMode_manual1" st="AUTO">AUTO</label>

          <input type="radio" class="btn-check" name="fanMode_manual" id="fanMode_manual2" autocomplete="off" value="0">
          <label class="btn btn-outline-primary" for="fanMode_manual2" st="OFF">OFF</label>

          <input type="radio" class="btn-check" name="fanMode_manual" id="fanMode_manual3" autocomplete="off" value="1">
          <label class="btn btn-outline-primary" for="fanMode_manual3" st="LOW">LOW</label>

          <input type="radio" class="btn-check" name="fanMode_manual" id="fanMode_manual4" autocomplete="off" value="2">
          <label class="btn btn-outline-primary" for="fanMode_manual4" st="MID">MID</label>

          <input type="radio" class="btn-check" name="fanMode_manual" id="fanMode_manual5" autocomplete="off" value="3">
          <label class="btn btn-outline-primary" for="fanMode_manual5" st="HIGH">HIGH</label>
        </div>

        <label for="acMode_manual" st="AC Mode:">AC Mode:</label>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">

          <input type="radio" class="btn-check none" name="acMode_manual" id="acMode_manual0" autocomplete="off" value="-2">
          <label class="btn btn-outline-primary none" for="acMode_manual0" st="OFF">OFF</label>

          <input type="radio" class="btn-check" name="acMode_manual" id="acMode_manual1" autocomplete="off" value="-1">
          <label class="btn btn-outline-primary" for="acMode_manual1" st="AUTO">AUTO</label>

          <input type="radio" class="btn-check" name="acMode_manual" id="acMode_manual2" autocomplete="off" value="0">
          <label class="btn btn-outline-primary" for="acMode_manual2" st="FAN">FAN</label>

          <input type="radio" class="btn-check" name="acMode_manual" id="acMode_manual3" autocomplete="off" value="1">
          <label class="btn btn-outline-primary" for="acMode_manual3" st="COOL">COOL</label>

          <input type="radio" class="btn-check" name="acMode_manual" id="acMode_manual4" autocomplete="off" value="2">
          <label class="btn btn-outline-primary" for="acMode_manual4" st="HEAT">HEAT</label>
        </div>
      </div>
    </div>


    <h3 class="hour-title" st="Hours of operation:">Hours of operation:</h3>
    <label for="deviceDays" st="Select the days of operation:" class="hour-subtitle">Select the days of operation:</label>
    <div class="btn-group week-group" role="group">
      <input type="checkbox" class="btn-check" id="deviceDays7" name="deviceDays" value="7">
      <label class="btn btn-outline-primary" for="deviceDays7" st="Sun">Sun</label>

      <input type="checkbox" class="btn-check" id="deviceDays1" name="deviceDays" value="1">
      <label class="btn btn-outline-primary" for="deviceDays1" st="Mon">Mon</label>

      <input type="checkbox" class="btn-check" id="deviceDays2" name="deviceDays" value="2">
      <label class="btn btn-outline-primary" for="deviceDays2" st="Tue">Tue</label>

      <input type="checkbox" class="btn-check" id="deviceDays3" name="deviceDays" value="3">
      <label class="btn btn-outline-primary" for="deviceDays3" st="Wed">Wed</label>

      <input type="checkbox" class="btn-check" id="deviceDays4" name="deviceDays" value="4">
      <label class="btn btn-outline-primary" for="deviceDays4" st="Thu">Thu</label>

      <input type="checkbox" class="btn-check" id="deviceDays5" name="deviceDays" value="5">
      <label class="btn btn-outline-primary" for="deviceDays5" st="Fri">Fri</label>

      <input type="checkbox" class="btn-check" id="deviceDays6" name="deviceDays" value="67">
      <label class="btn btn-outline-primary" for="deviceDays6" st="Sat">Sat</label>
    </div>

    <h3 class="time-title">Timer:</h3>
    <h6 class="red time-subtitle" st="*Remember to fill timer 1 before timer 2 or 3">*Remember to fill timer 1 before timer 2 or 3</h6>
    <div class="time">
      <label for="switchModeP1T1" st="Time1:">Time1:</label>
      <select id="switchModeP1T1" name="switchModeP1T1" class="form-control">
        <option value="0" st="OFF">OFF</option>
        <option value="1" st="ON">ON</option>
        <option value="2" selected st="Presence">Presence</option>
      </select>

      <label for="port1Timer1Start" st="From:">From:</label>
      <input type="time" class="form-control" id="port1Timer1Start" name="port1Timer1Start" value="00:00">

      <label for="port1Timer1End" st="To:">To:</label>
      <input type="time" class="form-control" id="port1Timer1End" name="port1Timer1End" value="00:00">
    </div>

    <div class="time">
      <label for="switchModeP1T2" st="Time2:">Time2:</label>
      <select id="switchModeP1T2" name="switchModeP1T2" class="form-control">
        <option value="0" st="OFF">OFF</option>
        <option value="1" st="ON">ON</option>
        <option value="2" selected st="Presence">Presence</option>
      </select>

      <label for="port1Timer2Start" st="From:">From:</label>
      <input type="time" class="form-control" id="port1Timer2Start" name="port1Timer2Start" value="00:00">

      <label for="port1Timer2End" st="To:">To:</label>
      <input type="time" class="form-control" id="port1Timer2End" name="port1Timer2End" value="00:00">
    </div>

    <div class="time">
      <label for="switchModeP1T3" st="Time3:">Time3:</label>
      <select id="switchModeP1T3" name="switchModeP1T3" class="form-control">
        <option value="0" st="OFF">OFF</option>
        <option value="1" st="ON">ON</option>
        <option value="2" st="Presence">Presence</option>
      </select>

      <label for="port1Timer3Start" st="From:">From:</label>
      <input type="time" class="form-control" id="port1Timer3Start" name="port1Timer3Start" value="00:00">

      <label for="port1Timer3End" st="To:">To:</label>
      <input type="time" class="form-control" id="port1Timer3End" name="port1Timer3End" value="00:00">
    </div>

    <!--<div class="item ms-0 mt-4 Temperature">
      <label for="Temperature" st="Temperature:">Temperature:</label>
      <input type="number" class="form-control" id="temperature" name="temperature" placeholder="Temperature"
             min="-15" max="15">
    </div>-->


    <div class="submit">
      <button id="btn_create" type="button" class="btn btn-primary" st="Save Changes">Save Changes</button>
    </div>
  </div>


  <h1 class="footer"><b>Nevegy</b> &copy; <span id="year">2024</span> </h1>
</div>

<dialog id="dialog" class="animate__animated">
  <div class="dialog-content">
    <p>Submitted successfully!</p>
  </div>
</dialog>

<div id="loading" class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white"
     style="--bs-bg-opacity: .5;">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="vendor/axios.min.js"></script>
<script src="js/lan.js?220207311148"></script>
<script src="js/comm.js?220207311148"></script>
<script src="js/managedevice.js?220207311148"></script>
</body>

</html>
